<script>
// import { reactive, } from "vue";
export default {
  setup( ) {
  },
};
</script>
<template>
  <div>
    <div class="container">
      <div class="down-wrap bg">
        <div class="left">
          <img
            src="../assets/img/logo.png"
            style="margin-left: -8px;width38px;height:38px"
          />
        </div>
        <div class="center">
          <img
            src="../assets/img/logotext.png"
            style="width: 59px; height: 25px"
          />
        </div>
        <router-link custom to="/search" v-slot="{ href, navigate }"
          ><div :href="href" @click="navigate" class="search">
            <i class="iconfont icon-sousuo1"></i>
            <span>搜索主播名、主播ID、主播间名</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bg {
  background-size: 100%;
  background-image: url(../assets/img/topNav.png);
}
.down-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 49px;
  padding: 5px 20px;
  .left {
    margin-right: 4px;
  }
  .center {
    margin-right: 8px;
  }
  .search {
    display: flex;
    .iconfont {
      color: #bbb;
      font-size: 16px;
      margin-right: 4px;
    }
    flex: 1;
    height: 28px;
    line-height: 28px;
    margin-left: 10px;
    padding-left: 16px;
    font-size: 12px;
    color: #bbb;
    border-radius: 14px;
    background-color: #f2f2f2;
  }
}
</style>
